<template>
  <div class="userPathChose">
    <h3 class="title">
      用户姓名：
      <span>{{main.orderListVO.userName}}</span>
    </h3>
    <div class="info">
      <div class="list">
        <div class="left">证件号码:</div>
        <div>{{main.orderListVO.paper}}</div>
      </div>
      <div class="list">
        <div class="left">手机号码:</div>
        <div>{{main.orderListVO.mobile}}</div>
      </div>
      <div class="list">
        <div class="left">用户地区:</div>
        <div>{{main.template.provinceValue}}-{{main.template.cityValue}}-{{main.template.countryValue}}</div>
      </div>
      <div class="list">
        <div class="left">预约手机号码:</div>
        <div>{{main.template.bookMobile}}</div>
      </div>
      <div class="list">
        <div class="left">所患疾病:</div>
        <div>
          <span v-if="main.template.sickType==1">意外</span>
          <span v-if="main.template.sickType==2">疾病</span>
          <span v-if="main.template.sickType==3">重疾</span>
          -
          {{main.template.sickName}}
        </div>
      </div>
      <div class="list">
        <div class="left">期望就诊地区:</div>
        <div>{{main.template.wantProvinceValue}}-{{main.template.wantCityValue}}-{{main.template.wantCountryValue}}</div>
      </div>
      <div class="list">
        <div class="left">预约医院:</div>
        <div>{{main.template.hospitalName}}</div>
      </div>
      <div class="list">
        <div class="left">预约科室:</div>
        <div>{{main.template.dept1Value}} {{main.template.dept2Value}}</div>
      </div>
      <div class="list">
        <div class="left">订单编号:</div>
        <div>{{main.orderListVO.id}}</div>
      </div>
      <div class="list">
        <div class="left require">
          <span>接单人员地区:</span>
        </div>
        <user-address
          :defaultValue="defaultAddress"
          ref="AddAddress"
          @countryChange="getPerson"
          seletStyle="width:220px"
        />
      </div>
      <div class="list">
        <div class="left require">
          <span><span style="color:#c00">*</span>接单人员姓名:</span>
        </div>
        <el-select
          style="width:220px;margin-right:20px;"
          v-model="form.personId"
          class="com-input"
          placeholder="请选择"
        >
          <el-option
            v-for="item in personList"
            :key="item.id"
            :label="item.userName"
            :value="item.id"
          />
        </el-select>
        <div class="blue" @click="dateDetail">点击查看人员排班情况</div>
      </div>
      <div class="list">
        <div class="left">派单备注:</div>
        <div>
          <el-input
            type="textarea"
            style="width:698px"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.remark"
          />
        </div>
      </div>
      <div class="list">
        <div class="left"></div>
        <div>
          <el-button type="primary" @click="submitForm">派单</el-button>
          <el-button type="danger" @click="qiangdan">抢单</el-button>
          <el-button @click="back">返回上一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const queryString = require("querystring");
import UserAddress from "../../../../components/address";
export default {
  name: "userPathChose",
  data() {
    return {
      main: {
        orderListVO: {
          userName: "",
          id: "",
          paper: "",
          mobile: ""
        },
        template: {
          provinceValue: "",
          cityValue: "",
          countryValue: "",
          sickType: "",
          sickName: "",
          wantProvince: "",
          wantCity: "",
          wantCountry: "",
          hospitalName: "",
          dept1Value: "",
          dept2Value: ""
        }
      },
      form: {
        id: this.$route.query.mainId,
        personId: "",
        remark: ""
      },
      searchForm: {
        province: "",
        city: "",
        country: "",
        sign:true
      },
      defaultAddress: null,
      personList: []
    };
  },
  components: {
    UserAddress
  },
  mounted() {
    this.detail();
    this.getPerson();
  },
  methods: {
    detail() {
      this.api
        .get(`/productOrder/${this.$route.query.mainId}`)
        .then(res => {
          if (res.code == 200) {
            this.main = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getPerson() {
      let addressParams = this.$refs.AddAddress.getData();
      this.searchForm.province = addressParams.province;
      this.searchForm.city = addressParams.city;
      this.searchForm.country = addressParams.country;
      this.api
        .get("/groundPerson?" + queryString.stringify(this.searchForm))
        .then(res => {
          if (res.code == 200) {
            this.personList = res.data.list;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    back() {
      this.$router.back(-1);
    },
    dateDetail() {
      let routeData = this.$router.resolve({
        path: "userDate?type=choose"
      });
      window.open(routeData.href, "_blank");
    },
    qiangdan(){
        this.api
        .post(
          "/productOrder/" + this.$route.query.mainId + "/beginReceive",
          this.form,
          "form"
        )
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.$router.push("../orderManage/orderWait?num="+res.data+"&mainId="+this.$route.query.mainId);
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    submitForm() {
      if(this.form.personId){
          this.api
        .post(
          "/productOrder/" + this.$route.query.mainId + "/groundPerson",
          this.form,
          "form"
        )
        .then(res => {
          if (res.code == 200) {
            this.$message("操作成功！");
            this.$router.push("userList");
          }
        })
        .catch(res => {
          console.log(res);
        });
      }else{
        this.$message("请选择派单人员！");
      }
      
    }
  }
};
</script>
 
<style lang="less" scoped>
.userPathChose {
  padding-left: 20px;
  .el-input {
    width: 220px;
    margin-right: 20px;
  }
  .blue {
    color: #068ff3;
    cursor: pointer;
  }
  h3 {
    padding-left: 30px;
  }
  .info {
    h3 {
      padding: 0;
      margin: 0;
      padding-bottom: 10px;
      font-size: 16px;
      padding-left: 30px;
    }
    .list {
      padding: 5px 0;
      display: flex;
      div {
        min-height: 40px;
        line-height: 40px;
      }
      .left {
        min-width: 110px;
        text-align: right;
        margin-right: 10px;
      }
      &.hos-state {
        .right {
          height: inherit;
          line-height: inherit;
          div {
            margin-bottom: 5px;
            &.item:last-child {
              margin: 0;
            }
          }
        }
      }
    }
  }
}
</style>
 